<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="query" size="small">
      <el-form-item label="作业名称：">
        <el-input v-model.trim="query.title" placeholder="请输入作业名称" />
      </el-form-item>
      <el-form-item label="课程名：">
        <el-input v-model.trim="query.courseId" placeholder="请输入课程名称" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="fetchData">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 作业列表表格 -->
    <el-table :data="papers" stripe border style="width: 100%">
      <el-table-column align="center" prop="title" label="答题名称" min-width="150" />
      <el-table-column align="center" prop="courseId" label="课程名" min-width="120" />
      <el-table-column align="center" prop="nick_name" label="老师" width="120" />
      <el-table-column align="center" label="作业时间" min-width="180">
        <template v-slot="{ row }">
          {{ formatStartEndDates(row.startDate, row.endDate) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" min-width="150">
        <template v-slot="{ row }">
          <el-tag :type="getExamStatusAndTime(row.startDate, row.endDate).type">
            {{ getExamStatusAndTime(row.startDate, row.endDate).label }}
          </el-tag>
          <el-tag v-if="row.graded && isAfterEnd(row.endDate)" type="success">
            已批改
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="180">
        <template v-slot:default="{ row }">
          <el-button
            type="text"
            :disabled="(row.graded && isAfterEnd(row.endDate)) || (!isDuringExam(row.startDate, row.endDate) && !row.graded)"
            @click="row.graded && isAfterEnd(row.endDate) ? viewDetail(row) : enterExam(row)"
          >
            {{ row.graded && isAfterEnd(row.endDate) ? '作业时间已截止' : '去完成作业' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page.current"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog :visible.sync="isDialogVisible" title="作业信息" width="30%">
      <Examform :cont="currentPaper" :form-type="formType" :type="2" @close="closePaperDialog" />
    </el-dialog>
  </div>
</template>
<script>
import Examform from '@/views/exam/Form/examform.vue'
import { getInfo } from '@/api/user'
import api from '@/api/paper'
import course from '@/api/course'
import { checkStudentsPaper } from '@/utils/exam'

export default {
  name: 'TeacherPapers',
  components: { Examform },
  data() {
    return {
      query: {
        title: '',
        courseId: '',
        creator: ''
      },
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      papers: [],
      isDialogVisible: false,
      currentPaper: {},
      formType: {},
      username: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      // 使用getStudentPaperList API获取数据
      const response = await api.getStudentPaperList({
        ...this.query,
        current: this.page.current,
        size: this.page.size,
        type: 1
      })
      this.papers = response.data.records
      this.papers = await Promise.all(response.data.records.map(async(paper) => {
        const studentsResponse = await course.getAllStudents(paper.courseId)
        const studentNames = studentsResponse.data.map(student => student.student_name)

        const checkResults = await checkStudentsPaper(paper.id, studentNames)
        paper.graded = Object.values(checkResults.studentResults).every(
          r => r.gradedAnswers === checkResults.totalQuestions
        )

        return paper
      }))
      this.page.total = response.data.total
      this.username = (await getInfo()).data.username
    },
    handleSizeChange(value) {
      this.page.size = value
      this.fetchData()
    },
    handleCurrentChange(data) {
      this.page.current = data
      this.fetchData()
    },
    resetQuery() {
      this.query = {
        title: '',
        courseId: '',
        creator: ''
      }
      this.fetchData()
    },
    // 判断当前时间是否在作业进行中（开始时间和结束时间之间）
    isDuringExam(startDate, endDate) {
      const now = new Date()
      return new Date(startDate) <= now && now <= new Date(endDate)
    },
    // 打开新建/编辑作业的弹窗
    openPaperDialog(paper = {}, formType = '添加') {
      this.currentPaper = paper
      this.formType = formType
      this.isDialogVisible = true
    },
    // 关闭弹窗
    closePaperDialog() {
      this.isDialogVisible = false
      this.currentPaper = {}
      this.fetchData() // 刷新数据
    },
    // 格式化开始和结束时间
    formatStartEndDates(startDate, endDate) {
      const start = new Date(startDate).toLocaleString('zh-CN', { hour12: false })
      const end = new Date(endDate).toLocaleString('zh-CN', { hour12: false })
      return `${start} - ${end}`
    },
    // 获取答题状态和距离开始/结束的时间
    getExamStatusAndTime(startDate, endDate) {
      const now = new Date()
      const start = new Date(startDate)
      const end = new Date(endDate)
      let label, type

      const formatTimeRemaining = (timeDiff) => {
        const hours = Math.floor(timeDiff / (1000 * 60 * 60))
        const minutes = Math.floor((timeDiff / (1000 * 60)) % 60)
        if (hours > 0) {
          return `${hours}小时${minutes}分钟`
        }
        return `${minutes}分钟`
      }

      if (now < start) {
        // 如果答题未开始
        const diff = start - now
        label = diff < 24 * 60 * 60 * 1000 ? `开始还有 ${formatTimeRemaining(diff)}` : `开始还有 ${Math.floor(diff / (1000 * 60 * 60 * 24))}天${Math.floor((diff / (1000 * 60 * 60)) % 24)}小时`
        type = 'warning'
      } else if (now >= start && now <= end) {
        // 如果答题进行中
        const diff = end - now
        label = diff < 24 * 60 * 60 * 1000 ? `结束还有 ${formatTimeRemaining(diff)}` : `结束还有 ${Math.floor(diff / (1000 * 60 * 60 * 24))}天${Math.floor((diff / (1000 * 60 * 60)) % 24)}小时`
        type = 'success'
      } else {
        // 如果答题已结束
        label = '已结束'
        type = 'info'
      }

      return { label, type }
    },
    // 判断当前时间是否晚于给定的结束时间
    isAfterEnd(endDate) {
      const now = new Date()
      const end = new Date(endDate)
      return now > end
    },

    enterExam(row) {
      this.$router.push(
        {
          path: '/exam/paper/answer',
          query: {
            paperId: row.id,
            creator: this.username,
            endTime: row.endDate
          }
        })
    },
    viewDetail(row) {
      console.log(row)
      this.$router.push({
        path: '/homework/paper/result',
        query: {
          id: this.paperId,
          creator: this.username
        }
      })
    }
  }
}
</script>
